<template>
    <!-- 财务审核 -->
    <div>
        <el-container>
            <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
                <div style="display: inline">
                    <el-input
                    placeholder="请输入合同编号" clearable size="mini"
                    style="width: 300px;margin: 0px;padding: 0px;"
                    @keyup.enter.native="searchEmp"
                    prefix-icon="el-icon-search"
                    v-model="contractNo">
                    </el-input>
                    <el-button type="primary" size="mini" style="margin-left: 5px"
                    icon="el-icon-search" @click="searchEmp">搜索
                    </el-button>
                </div>
                <div style="margin-left: 5px;margin-right: 20px;display: inline">
          
                    <el-button type="success" size="mini"><i class="fa fa-lg fa-level-down"
                        style="margin-right: 5px"></i>导出清单
                    </el-button>
                </div>
            </el-header>
            <el-main>
                <!-- 列表页 -->
                <div>
                    <table-form :interfaces="interfaces"></table-form>
                </div>
            </el-main>
            <dialog-form :forminfo="form">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="银行到账金额:"  prop='bankEceivedAmount'>
                                <el-input type="text" auto-complete="off" placeholder="请输入银行到账金额" 
                                 clearable v-model="form.bankEceivedAmount">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="手续费:"  prop='bankFee'>
                                <el-input type="text" auto-complete="off" placeholder="请输入手续费" 
                                 clearable v-model="form.bankFee">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="银行到账日期:"  prop='bankReceivedDate'>
                                <el-date-picker
                                    v-model="form.bankReceivedDate"
                                    type="date"
                                    placeholder="选择银行到账日期"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="驳回原因:"  prop='remark'>
                                <el-input type="text" auto-complete="off" placeholder="如需驳回，请输入原因" 
                                 clearable v-model="form.remark">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </dialog-form>
        </el-container>
    </div>
</template>
<script>
import TableForm from './table'
import DialogForm from './dialog'
export default {
  data() {
    return {
      exportLoading:false,
      contractNo: "",
      interfaces:"/finance/queryContract",
      info:{},
      dialogShow:false,
      birthdayOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      form:{
          bankEceivedAmount:"",
          bankFee:"",
          bankReceivedDate:"",
          remark:"",
      },
      rules: {
        bankEceivedAmount: [
          { required: true, message: "请输入银行到账金额", trigger: "blur" }
        ],
        bankFee: [
          { required: true, message: "请输入手续费", trigger: "blur" }
        ],
        bankReceivedDate: [
          { required: true, message: "请选择银行到账日期", trigger: "blur" }
        ],
        
      },
    };
  },
  components:{
    TableForm:TableForm,
    DialogForm:DialogForm,
  },
  methods:{
      searchEmp(){
        this.currentPage = 1;
        this.requestTableInfo(this.currentPage,this.pageSize);
      },  
  }
};
</script>
<style scoped>
.el-row {
  margin-top: 10px;
}
.el-col {
  height: 50px;
  line-height: 50px;
  text-align: left;
}
.el-input {
  width: 70%;
}
.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}

.slide-fade-enter-active {
  transition: all 0.8s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
.idcard {
  border-bottom: 1px solid #ccc;
}
</style>